<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>产品管理</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .organizeName,
        .operation span:first-of-type {
            color: #1990FF;
        }

        .operation span:last-of-type {
            color: #f5222d;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }

        .twoRow {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-table tr td:nth-of-type(3) {
            min-width: 5em;
        }

        td
        {
            white-space: nowrap;
            text-align: center;
        }

        label{
            width: auto;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>
<script src="./js/xm-select.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto !important;">搜索：</label>
            <input type="text" name="pinName" class="layui-input" style="width: 14em;" placeholder="品名" value="">
        </div>
        <div class="layui-inline">
            <input type="text" id="deptName" name="deptName" class="layui-input" style="width: 8em;" placeholder="所属部门" value="" onclick="isAdminOfProcess()">
        </div>

        <!--        <div class="layui-inline" style="width: 10em !important;">-->
        <!--          <select name="projectStatus">-->
        <!--            <option value=""></option>-->
        <!--          </select>-->
        <!--        </div>-->
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">查询产品</button>
        </div>
    </div>
</form>

<table class="layui-table">
    <thead>
    <tr>
        <!--          <th><input type="checkbox" id="select" onclick="selectAll()" /></th>-->
        <th style="text-align: center">产品名</th>
        <th style="text-align: center">产品类型</th>
        <th style="text-align: center">所属部门</th>
        <th style="text-align: center">ERP物料ID(FMaterialId)</th>
        <th style="text-align: center">创建人 </th>
        <th style="text-align: center">创建时间</th>
        <th style="text-align: center">产品状态</th>
        <th style="text-align: center">工序说明</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <!--      <button type="button" class="layui-btn layui-btn-xs" style="background: #F5222D;" onclick="deleteProject()">批量删除</button>-->
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<div id="processInfo"  class="site-text" style="margin: 5%; display: none"></div>


<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var laydate = null;
    var form = null;
    var list = null;

    layui.use(['form', 'element', 'laydate'], function() {
        form = layui.form;
        laydate = layui.laydate;

        search(1);

        form.on('submit(searchBtn)', function() {
            search(1);
            return false;
        });
        $('.fristPage').click(function() {
            search(1);
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1));
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage));
            return false;
        });
        $('.endPage').click(function() {
            search(endPage);
            return false;
        })
    })

    function isAdminOfProcess() {
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                }
                else if (res.code===400){
                    $('#deptName').attr('disabled','disabled');
                    layer.msg("非管理员只能查看本部门产品");
                }
            }
        })
    }



    function listProcessInfo(index) {
        $("#processInfo").empty();
        $.ajax({
            url: '/pin-library/listProcessInfo/'+index,
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    var trs='';
                    //设定弹出内容
                    trs+='<div align="center" style="width: 510px;">'
                    trs+='<div style="margin: 5px;width: 510px" align="center"><h3><b> 工序明细</b> </h3>'+
                        '<div style="margin: 5px;width:auto;float: left"><span>产品名:<b>'+res.data.pinName+'</b> </span></div></div>'
                    trs+='<div align="center"><table border="2" width="510px" height="120px">' +
                        '    <tr>' +
                        '        <th><b>工序流程名/PROCESS</b></th>' +
                        '        <th><b>工艺制程条件/PROCESS CONDITION</b></th>' +
                        '    </tr>'
                    for (var i = 0; i < res.data.process.length; i++) {
                        trs+='    <tr>' +
                            '        <th>'+res.data.process[i]+'</th>' +
                            '        <th>'+res.data.conditionInfo[i]+'</th>' +
                            '    </tr>';
                    }
                    trs+='</table></div></div>';
                    $("#processInfo").append(trs);
                    //打开弹出
                    layer.open({
                        type: 1,
                        title: '产品工序明细',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area : ['600px' , '550px'],
                        content: $('#processInfo'),
                        end:function () {
                            $('#processInfo').css('display','none')
                        }
                    });


                }
            }
        })
    }

    function edit(index) {
        $.ajax({
            url: '/sys-user/getAdminLevel/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim',
                        area: ['610px', '460px'],
                        title: '编辑产品信息',
                        content: `
            <form class="layui-form" action="" lay-filter="change">
              <div style=" margin: 10px"></div>

                <div style="margin: 10px">
                <label class="layui-form-label" style="width: auto">产品名/PN：</label>
                <div class="layui-input-inline " style="width: auto"  >
                <input id="pinNameOfEdit" type="text" name="pinNameOfEdit" placeholder="输入产品名" lay-verify="required" class="layui-input" style="width: 15em " autocomplete="off">
                <span style="color: red;font-size: small">★需要与ERP产品型号(FSpecification)对应</span>
                </div></div>
                <div style="margin: 10px">
                <label class="layui-form-label" style="width: auto;">ERP物料ID：</label>
                <div class="layui-input-inline " style="width: auto">
                <input id="erpIdOfEdit" type="text" name="erpIdOfEdit" placeholder="输入ERP物料ID" lay-verify="required" class="layui-input" style="width: 15em " autocomplete="off">
                <span style="color: red;font-size: small">★需要与ERP物料Id(FMaterialId)对应</span>
                </div></div>
                <div style="margin: 10px">
                <label class="layui-form-label">产品类型：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="productType" type="text" name="productType" placeholder="输入产品类型" lay-verify="required" class="layui-input" style=" width: 15em " autocomplete="off"></div>
                </div>
                <div style="margin: 10px">
                <label class="layui-form-label">所需工序：</label>
                <div class="layui-input-inline " style="width: 15em">
                <div class="layui-input-inline" style="width: 7em;"><div id="process" lay-filter="process" style="width: 30em;" ></div></div>
                </div></div>
                <div style="margin: 10px">
                <label class="layui-form-label">产品状态：</label>
                <div class="layui-input-inline " style="width: 15em">
                <select name="status" id="status" lay-verify="required" lay-filter="status">
                </select></div></div>

                 <div align="center" style="margin:30px 0">
                 <button id="submit" type="submit" class="layui-btn" lay-submit="" lay-filter="changeBtn" >点击修改</button>
                 <button type="button" class="layui-btn layui-btn-danger" onclick="layer.closeAll()">取消编辑</button></div>

            </form>
          `,
                        success: function() {
                            $.ajax({
                                url: url + '/pin-library/getPinInfo/'+index,
                                contentType: 'application/json',
                                async: false,
                                success: function(res) {
                                    $('#pinNameOfEdit').val(res.data.pinName);
                                    $('#productType').val(res.data.productType);
                                    $('#erpIdOfEdit').val(res.data.erpId);
                                    var processList=res.data.process.split(",")
                                    //工序下拉框
                                    var processOption = {
                                        el: '#process',
                                        name: 'process',//表单的name属性
                                        filterable: true,
                                        id: 'allProcess',
                                        initValue: [ processList[0],processList[1],processList[2],processList[3],processList[4],processList[5],processList[6],processList[7],processList[8],
                                            processList[9],processList[10],processList[11],processList[12],processList[13],processList[14],processList[15],processList[16],processList[17],processList[18],
                                            processList[19],processList[20],processList[21],processList[22],processList[23],processList[24],processList[25],processList[26],processList[27],processList[28]
                                        ],//默认项
                                        layVerify: 'required',//必填项
                                        //layVerType: 'tips',//提示类型 同layui
                                        tips: '请选择工序...',
                                        data: [],
                                    };

                                    var process = xmSelect.render(processOption)

                                    setTimeout(function(){
                                        $.ajax({
                                            url: url + '/process-info/listProcessOfPin',
                                            method: 'POST',
                                            async : false,
                                            contentType: 'application/json',
                                            data: JSON.stringify({
                                                pinId: index
                                            }),
                                            success: function(res) {
                                                //data是ajax 异步获取的
                                                var data =[];
                                                for (var i = 0; i < res.data.length; i++) {
                                                    data.push({
                                                        name : res.data[i].processName,
                                                        value :res.data[i].id
                                                    });
                                                }
                                                //模拟通过ajax 获取json数据,异步更新多选下拉框的值
                                                process.update({data: data})
                                            }
                                        })
                                    },100);
                                    //产品状态
                                    if(res.data.productStatus){
                                        $('#status').append("<option value='0'>停产</option>")
                                        $('#status').append("<option value='1' selected='selected'>在产</option>")
                                    }else{
                                        $('#status').append("<option value='0' selected='selected'>停产</option>")
                                        $('#status').append("<option value='1'>在产</option>")
                                    }
                                    form=layui.form;
                                    form.render('select');
                                    form.render();
                                }
                            })
                        }
                    });
                }else if(res.code===400){
                    layer.msg("权限不足!")
                }
            }
        })

        form.on('submit(changeBtn)', function(data) {
            console.log("校验通过，准备提交");
            var data = form.val("change");
            data.id=index;
            data.erpId=$('#erpIdOfEdit').val();
            console.log(data);
            $.ajax({
                url: url + '/pin-library/update',
                method: 'POST',
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(data),
                success: function(res) {
                    layer.alert(res.msg, {
                        end: function(){
                            location.reload();
                        }
                    });
                }
            })
            return false;
        })
    }


    function deletePin(index) {
        layer.alert('禁止删除!', {
            icon: 2,
            skin: 'layer-ext-demo' //见：扩展说明
        })
    }

    function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        data.userId=sessionStorage.getItem('userId');
        $.ajax({
            url: url + '/pin-library/listPin',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>" +
                        "<td class='organizeName'>" + res.data.records[i].pinName + "</td>" +
                        "<td>" + res.data.records[i].productType+ "</td>" +
                        "<td>" + res.data.records[i].deptName + "</td>" +
                        "<td class='organizeName'>" + res.data.records[i].erpId + "</td>" +
                        "<td>" + res.data.records[i].createBy + "</td>" +
                        "<td>" + res.data.records[i].createTime.replace('T',' ') + "</td>" +
                        "<td>" + productStatus(res.data.records[i].productStatus) +"</td>" +
                        "<td><button class='layui-btn layui-bg-green layui-btn-sm' onclick='listProcessInfo(" + res.data.records[i].id + ")'>查看相关工序</button></td></td>" +
                        "<td class='operation'><button class='layui-btn layui-btn-normal layui-btn-sm' onclick='edit(" + res.data.records[i].id + ")'>编辑</button>　"+
                        "<button class='layui-btn layui-btn-danger layui-btn-sm' onclick='deletePin(" + res.data.records[i].id + ")'>删除</button></td>" +
                        "</tr>"
                    );
                }
                $('#page').html(displayStart)
            }
        })
    }
</script>
</body>
</html>
